<template>
  <div class="Header">
    <live></live>
    <suspense>
      <template #default>
         <async-com></async-com>
      </template>
       <template #fallback>
          <Loading></Loading>
      </template>
    </suspense>
    <h1 v-text="title" :class="$attrs.class"></h1>
    <h2 v-text="content" v-bind="$attrs"></h2>
    <div>{{info.message}}</div>
    <button @click="clickHandler">点击事件eventbus</button>
    <slot-scoped></slot-scoped>
  </div>
</template>
<script>
import { defineAsyncComponent } from 'vue'
import mitter from '../utils/eventBus'
import SlotScoped from './SlotScoped'
import Loading from './Loading/loading.vue'
import Live from './LiveComponent'
// import AsyncCom from './AsyncComponent/AsyncComponent'
// const AsyncCom = defineAsyncComponent(() => import('./AsyncComponent/AsyncComponent'))
const AsyncCom = defineAsyncComponent({
  loader: () => import('./AsyncComponent/AsyncComponent'),
  loadingComponent: Loading,
  delay: 2000
})
export default {
  data () {
    return {
      message: 'hello world'
    }
  },
  components: {
    SlotScoped,
    AsyncCom,
    Live
  },
  methods: {
    clickHandler () {
      mitter.emit('foo', { a: 'b' })
      mitter.emit('koker', { name: 'zs', age: 20 })
    }
  },
  // props: ['title', 'content'],
  props: {
    title: {
      type: String,
      default () {
        return ''
      }
    },
    content: {
      type: String,
      default () {
        return ''
      }
    },
    info: {
      type: Object,
      default () {
        return {}
      }
    }
  }
}
</script>
<style scoped>
</style>
